<template>
  <div>
    <myhead title="我的">
      <template #right>
        <img
          class="rightImg"
          src="../../assets/images/ic_settings.png"
          alt=""
        />
      </template>
    </myhead>
    <div class="musger">
      <div>
        <i class="icon iconfont icon-mima1"></i><br />
        密码管理
      </div>
      <div>
        <i class="icon iconfont icon-yinxingqia"></i><br />
        银行卡管理
      </div>
    </div>
    <mineitem content="风险承受能力评估" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-bianji fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
    <mineitem content="安全保障" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-17 fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
    <mineitem content="我的关注" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-weibiaoti2fuzhi12 fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
    <mineitem content="帮助中心" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-bangzhu fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
    <mineitem content="关于我们" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-weibiaoti2fuzhi12 fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
    <mineitem content="检查更新" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-jianchaquyu fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
    <mineitem content="联系客服" class="tiao">
      <template #lefticon>
        <i class="icon iconfont icon-service fl"></i>
      </template>
      <template #righticon>
        <i class="icon iconfont icon-youjiantou fr"></i>
      </template>
    </mineitem>
  </div>
</template>

<script>
import myhead from "../../components/Header/head";
import mineitem from "./mineitem";
export default {
  components: { myhead, mineitem },
};
</script>

<style scoped>
.rightImg {
  position: absolute;
}
.musger {
  display: flex;
  width: 100%;
  height: 1.5rem;
  line-height: 0.7rem;
  border-bottom: 1px solid #ccc;
}
.musger div {
  flex: 1;
  text-align: center;
  margin-top: 0.1rem;
}
.iconfont {
  font-size: 30px;
}
.icon-yinxingqia,
.icon-mima1,
.icon-youjiantou,
.icon-bianji,
.icon-17,
.icon-weibiaoti2fuzhi12,
.icon-bangzhu,
.icon-jianchaquyu,
.icon-service {
  color: #86d592;
  vertical-align: middle;
}
.tiao {
  height: 1.3rem;
  padding: 0.1rem;
  line-height: 1rem;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
.icon-youjiantou {
  float: right;
}
.fl {
  font-size: 26px;
  margin-right: 0.1rem;
}
</style>